<style scoped>
    .expand-row{
        margin-bottom: 16px;
    }
    .expand-value{
      word-break: break-all;
    }
    .jv-container .jv-code {
        overflow: hidden;
        padding: 25px 20px;
    }
    .jv-container .jv-tooltip {
        top: 0;
    }
</style>
<template>
    <div>
        <Row class="expand-row">
            <Col span="24">
                <span class="expand-key">did: </span>
                <json-viewer :value="row.didInfo.did" :expand-depth=4 copyable  sort></json-viewer>
                <span class="expand-key">publicKey: </span>
                <json-viewer :value="row.didInfo.publicKey" :expand-depth=4 copyable  sort></json-viewer>
                <span class="expand-key">credentialJson: </span>
                <!-- <span class="expand-value" v-html="row.credentialJson"></span> -->
                <json-viewer :value="row.credentialJson" :expand-depth=4 copyable  sort></json-viewer>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        props: {
            row: Object
        }
    };
</script>
